<template>
  <div>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :small="small"
      :disabled="disabled"
      :background="background"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- :hide-on-single-page="true" -->
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
const props = withDefaults(
  defineProps<{
    page: number
    size: number
    small: boolean
    disabled: boolean
    background: boolean
    layout: string
    total: number
    pageSizes: number[]
  }>(),
  {
    page: 1,
    size: 10,
    small: false,
    disabled: false,
    background: false,
    layout: ' prev, pager, next, jumper,->,sizes, total',
    total: 10,
    pageSizes: () => [8, 16, 32, 64],
  },
)
const emit = defineEmits<{
  (e: 'update:size', value: number): any
  (e: 'update:page', value: number): any
  (e: 'paginations', value: number): any
  (e: 'pagination', value: number): any
}>()
const pageSize = computed({
  get: () => props.size,
  set: (val) => {
    emit('update:size', val)
  },
})
const currentPage = computed({
  get: () => props.page,
  set: (val) => {
    emit('update:page', val)
  },
})
function handleSizeChange(val: number) {
  emit('paginations', val)
}

function handleCurrentChange(val: number) {
  emit('pagination', val)
}
</script>
<style lang="less" scoped></style>
